<div class="row animated fadeInRight" id="roleIndex">
	<ol class="breadcrumb">
		<#if pMenu??>
		<li>${pMenu.name}</li> </#if>
		<li class="active">${menu.name}</li>
	</ol>

	<div class="col-sm-5">
		<grid :data="gridData" :headers="gridHeaders" :columns="gridColumns"
			:major="majorKey" :resc="resource" :resc-name="resourceName"
			:buttons="buttons" :no-search="noSearch"> </grid>
	</div>
	<div class="col-sm-7">
		<div class="row button-group">
			<button class="btn btn-default btn-lg btn-save" @click="save">保存设置</button>
			<button class="btn btn-default btn-lg btn-select" @click="selectAll">全选</button>
		</div>
		<form id="resc_form" action="/backend/resource" method="PUT">
			<input type="hidden" name="role_code" v-model="curCode">
			<div class="panel panel-info row">
				<div class="panel-heading">菜单设置</div>
				<div class="panel-body">
					<ul class="list-group small" v-for="x in menuData">
						<li class="list-group-item"><input type="checkbox" name="resc_code" value="{{x.code}}" v-model="x.open"><span class="resc-name">{{x.name}}</span> </li>
					</ul>
				</div>
			</div>
			<div class="panel panel-danger row">
				<div class="panel-heading">访问权限设置</div>
				<div class="panel-body">
					<ul class="list-group small" v-for="x in rescData">
						<li class="list-group-item"><input type="checkbox" name="resc_code" value="{{x.code}}" v-model="x.open"><span class="resc-name">{{x.name}}</span></li>
					</ul>
				</div>
			</div>
		</form>

	</div>

</div>
<style>
.resc-name{
	margin-left:20px;
}
</style>
<script>
	registerGrid("#grid-template");
	var vm = new Vue({
		el : "#roleIndex",
		data : {
			gridHeaders : [ "编码", "名称" ],
			gridColumns : [ "code", "name" ],
			majorKey : "code",
			resource : "role",
			resourceName : "角色",
			resourceURL : "/backend/role",
			buttons : {
				"add" : true
			},
			gridData : [],
			menuData:[],
			rescData:[],
			curCode:"00",
			noSearch : true
		},
		ready : function() {
			this.$http.get(this.resourceURL).then(function(resp) {
				this.gridData = resp.data.items;
			});
			
			this.loadResources(this.curCode); 
		},
		methods:{
			loadResources:function(){
				this.$http.get("/backend/resource?role_code="+this.curCode).then(function(resp) {
					//logs(resp.body)
					var menus=resp.data.itemMaps.menus;
					var space="----";
					for(var i=0;i<menus.length;i++){
						if(menus[i].p_code!="00")
							menus[i].name=space+menus[i].name;
					}
					this.menuData=menus;
					this.rescData=resp.data.itemMaps.resources;
				});
			},
			selectAll:function(){
				this.menuData.forEach(function(item,i){
					item.open=true;
				});
				this.rescData.forEach(function(item,i){
					item.open=true;
				});
			},
			save:function(){
				$("#resc_form").ajaxSubmit(function(resp){
					bootbox.alert(resp.message);
				});
			}
		},
		events : {
			gridUpdateSuccess : function(resp, type) {
				logs("type:" + type);
			},
			rowSelected : function(code) {
				this.curCode=code;
				this.loadResources(); 
			},
			
		}
	});
</script>